<!-- templates/admin/login.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台登录</title>
<link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
<style>
    .login-card { max-width: 400px; margin: 8rem auto; }
    .form-alert { display: none; }
</style>
</head>
<body class="bg-light">
<div class="card login-card shadow">
    <div class="card-header bg-primary text-white text-center">
        <h4>管理后台登录</h4>
    </div>
    <div class="card-body">
        <div class="alert alert-danger form-alert" id="errorAlert"></div>
        <form id="loginForm" method="post">
            <div class="mb-3">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username" value="xiaolin" required>
            </div>
            <div class="mb-3">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" value="xiaolin123456" required>
            </div>
            <div class="mb-3">
                <label for="safe_code">安全码</label>
                <input type="password" class="form-control" id="safe_code" name="safe_code" value="safe2025" required>
            </div>
            <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
    </div>
</div>
<script>
document.getElementById("loginForm").addEventListener("submit", async function(e){
    e.preventDefault();
    const formData = new FormData(this);
    const errorAlert = document.getElementById("errorAlert");

    try{
        const response = await fetch("/admin/login", {
            method: "POST",
            body: formData,
            credentials: 'include'
        });
        const result = await response.json();
        if(result.code === 1){
            window.location.href = "/admin/dashboard";
        } else {
            errorAlert.style.display = "block";
            errorAlert.innerText = result.msg;
        }
    } catch(err){
        errorAlert.style.display = "block";
        errorAlert.innerText = "请求失败，请检查网络！";
    }
});
</script>
</body>
</html>
